<template>
  <div class="login-container">
    <!-- static/media/video.3cf57b17.mp4  static/img/logo1.33ef7fa0.png-->
    <!-- <img src="~@/assets/img/" alt=""> -->
    <video src="~@/assets/video/video.3cf57b17.mp4" autoplay loop muted />

    <el-form ref="form" class="login-form" :model="form" :rules="rules">
      <el-form-item class="logo">
        <img src="~@/assets/img/logo1.33ef7fa0.png" alt="">
      </el-form-item>
      <el-form-item prop="account">

        <el-input v-model="form.account" placeholder="请输入账号" />
        <img src="~@/assets/img/username.png" alt="" class="icon-img">
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" show-password type="password" />
        <img src="~@/assets/img/password.png" alt="" class="icon-img">
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="form.code" placeholder="请输入验证码" @keyup.enter.native="login" />
        <img src="~@/assets/img/captcha.png" alt="" class="icon-img">
        <img v-show="img.length" :src="img" alt="codeImage" class="code-image" @click="getCaptcha">

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <div class="gentleReminder">
          仅用于IT培训教学使用,为保障您的个人信息安全,请勿向平台录入任何个人敏感信息（如手机号、身份证号等）!
        </div>
      </el-form-item>

    </el-form>
    <div class="login-footer"><div>
      江苏传智播客教育科技股份有限公司
      <span style="margin-left: 20px;">版权所有Copyright 2006-2022 All Rights Reserved</span> <span style="margin-left: 20px;">苏ICP备16007882号-11</span></div>
    </div>
  </div>
</template>

<script>
// avatar-wrapper el-dropdown-selfdefine
import { sendCaptcha } from '@/api/user'
import { randomNum } from '@/utils'
//  this.passwordNum = Math.floor(Math.random() * 9000) + 1000
//  const res = await captcha(this.passwordNum)
//  this.ImgUrl = window.URL.createObjectURL(new Blob([res]))
// export const captcha = key => request.get(`/manager/captcha?key=${key}`, { responseType: 'blob' })

export default {
  name: 'Login',
  data() {
    return {
      form: {
        account: 'shenlingadmin', // 用户名
        password: '123456', // 密码
        tenant: '',
        bindAccount: '',
        bindPassword: '',
        signAccount: '',
        signPassword: '',
        code: '',
        key: randomNum(24, 16)
      },
      img: '',
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: ['blur'] },
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur'] },
          { pattern: /^\w{6,16}$/, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: ['blur'] }
        ]
      }
    }
  },
  async created() {
    const res = await this.getCaptcha()
    console.log(res)
    // const res = await sendCaptcha('1234')
    // console.log(URL.createObjectURL(res.data))
  },
  methods: {
    login() {
      this.$refs.form.validate(async(valid) => {
        try {
          if (!valid) return
          await this.$store.dispatch('user/login', this.form)
          this.$router.push('/')
          URL.revokeObjectURL(this.img)
        } catch {
          this.getCaptcha()
          // this.form = { code: '' }
        }
      })
    },
    async getCaptcha() {
      const res = await sendCaptcha(this.form.key)
      //
      this.img = URL.createObjectURL(res)
    }
  }
}
</script>

<style lang="scss" scoped>

  .login-container {
  background-size: 100% 100%;
  height: 100vh;
  overflow-y: hidden;
  position: relative;
  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .el-form {
    position: absolute;
    top: 45%;
    left: 45%;
    margin: -180px 0 0 -160px;
    width: 450px;
    height: 490px;
    padding: 36px 40px;
    background: #fff;
    border-radius: 10px;

    .logo {
      text-align: center;
      img {
        height: 54px;
      }
    }
    ::v-deep .el-input__inner {
      padding-left: 48px;
      height: 50px;
    }
    .icon-img {
      width: 21px;
      height: 21px;
      position: absolute;
      left: 14px;
      top: 13px
    }
    ::v-deep .el-input .el-input__clear {
      font-size: 18px;
    }
    .code-image{
      display: inline-block;
    vertical-align: top;
    width: 71px;
    height: 32px;
    cursor: pointer;
    margin-left: 10px;
    position: absolute;
    right: 10px;
    top: 9px;
    }
.gentleReminder{
    line-height: 20px;
    font-size: 14px;
    color: #fd3333;
    margin-bottom: 20px;
    }
    .el-button {
      height: 54px;
      width: 370px;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 14px;
      margin-top: 22px
      // background-color: ;
    }

  }
  .login-footer{
     position: fixed;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: .85rem;
    line-height: 1rem;
    height: 1rem;
    opacity: 0.9;

  }

}
</style>
